<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>
	<view class="coupon-buy">
		<view class="coupon-card box-border bg-white">
			<view class="ml-4 pt-2">
				<view class="font-medium text-4xl mb-3">{{ formData.title }}</view>
				<view class="text-sm mb-2">使用人：{{formData.nickname}}</view>
				<view>有效期至：{{ formData.time }}</view>
			</view>
		</view>
	</view>
	<view class="mt-[100rpx] mx-[26rpx]">
		<u-button type="primary" shape="circle" @click="submit">立即核销</u-button>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { geCouponMsg, geCouponHexiao } from '@/api/user';

const formData = ref<any>({});

let hid = '';

const getData = async (id) => {
	formData.value = await geCouponMsg({ id });
};

const submit = async () => {
	await geCouponHexiao({id:hid});
	uni.$u.toast('核销成功');
	setTimeout(() => {
		uni.navigateBack();
	}, 1500);
};

onLoad((options: any) => {
	hid = options.id;
	getData(options.id);
});
</script>

<style lang="scss">
.coupon-buy {
	height: 100%;

	.coupon-card {
		margin: 30rpx 20rpx;
		height: 200rpx;
	}
}
</style>
